<template>
  <div class="box">
    <header class="tou">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
    </header>
    <main class="zhong">
      <!-- {{ store.cartList }} -->
      <van-empty v-if="store.cartList.length == 0"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
        description="购物车空空如也" />
      <van-swipe-cell v-else v-for="item in store.cartList" :key="item.id">
        <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image">
          <template #tag>
            <van-checkbox v-model="item.checked"></van-checkbox>
          </template>
          <template #footer>
            <van-stepper v-model="item.count" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="store.deleteItem(item.id)"/>
        </template>
      </van-swipe-cell>
    </main>
  </div>
  <footer class="di">
    <van-submit-bar :price="store.totalPrice*100" button-text="提交订单" @submit="$router.push('/order')">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </footer>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue';
const store = useCounterStore()
const allChecked=computed({
  get(){
    if(store.cartList.length==0){
      return false;
    }
    else{
      return store.cartList.every(item=>item.checked==true);
    }
  },
  set(newValue){
    store.cartList.forEach(item=>item.checked=newValue);
  }
})
</script>
<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
.van-submit-bar{
  bottom: 50px;
}
</style>